<template>
  <ContentWrap>
    <div class="flex items-center mb-4">
      <el-button @click="go(-1)">返回</el-button>
    </div>

    <!-- 详情信息区域 -->
    <!-- <Descriptions class="mb-8" :schema="detailSchema" :data="descriptionsRow" /> -->

    <ElDescriptions border :column="2">
      <ElDescriptionsItem :label="item.label" v-for="(item, index) in detailSchema" :key="index">
        <template v-if="item.field === 'logistics_voucher_info'">
          <FileList :files="descriptionsRow[item.field] || []" />
        </template>
        <template v-else-if="item.field === 'cost'">
          <div v-for="(el, eIndex) in descriptionsRow[item.field]" :key="eIndex">
            <span>{{ useEnumeratePicker(operatorOptions.costing, el.type) }}:</span>
            <span>{{ el.amount }}</span>
            <span>{{
              useEnumeratePicker(operatorOptions.currency, el.transaction_currency_id)
            }}</span>
          </div>
        </template>
        <template v-else>
          {{ descriptionsRow[item.field] }}
        </template>
      </ElDescriptionsItem>
    </ElDescriptions>
    <div class="mb-20px"></div>
    <!-- 商品列表 -->
    <el-table
      :data="tableShopList"
      highlight-current-row
      stripe
      border
      v-loading="tableLoading"
      :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ textAlign: 'center' }"
    >
      <el-table-column
        label="库存ID"
        prop="inventory_id"
        min-width="80"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="商品名称"
        prop="product_name"
        min-width="200"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="原仓库"
        prop="warehouse_name"
        min-width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="目的地仓库"
        prop="to_warehouse_name"
        min-width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="调拨数量"
        prop="number"
        min-width="100"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="到货时间"
        prop="arrival_date"
        min-width="160"
        :show-overflow-tooltip="true"
      />
    </el-table>
  </ContentWrap>
</template>

<script setup lang="ts">
import FileList from '@/components/FilePreview/index.vue'
import { Descriptions, type DescriptionsSchema } from '@/components/Descriptions'
import { ContentWrap } from '@/components/ContentWrap'
import { getTransferDetailApi } from '@/api/warehouse'
import type { TransferDetailData } from '@/api/warehouse/types'
import { getOrderEnumApi } from '@/api/order'

import { useEnumeratePicker } from '@/utils'
const { go } = useRouter()
const { query } = useRoute()

const tableLoading = ref<boolean>(false)
const tableShopList = ref<any[]>([])
const descriptionsRow = ref<Record<string, any>>({})

const detailSchema = ref<DescriptionsSchema[]>([
  {
    field: 'company_name',
    label: '物流公司'
  },
  {
    field: 'ship_date',
    label: '发货时间'
  },
  {
    field: 'serial_number',
    label: '发货单号'
  },
  {
    field: 'logistics_no',
    label: '物流单号'
  },
  {
    field: 'arrival_date',
    label: '到货时间'
  },
  {
    field: 'real_arrival_date',
    label: '实际到货日期'
  },
  {
    field: 'cost',
    label: '成本'
  },
  {
    field: 'logistics_voucher_info',
    label: '物流凭证'
  },
  {
    field: 'notes',
    label: '备注',
    span: 24
  },
  {
    field: 'create_time',
    label: '创建时间'
  }
])

// 获取详情数据
const getDetail = async () => {
  if (!query.id) return

  tableLoading.value = true
  try {
    const resp = await getTransferDetailApi(query.id as string)
    if (resp.code === 0 && resp.data) {
      descriptionsRow.value = resp.data
      tableShopList.value = resp.data.iterm || []
    }
  } catch (error) {
    console.error('获取调拨详情失败:', error)
  } finally {
    tableLoading.value = false
  }
}
const operatorOptions = ref<Record<string, any>>({})
const getDropDownBoxInfo = async () => {
  try {
    const resp = await getOrderEnumApi({ field: 'all' })
    operatorOptions.value = resp.data
  } catch (error) {}
}
onMounted(() => {
  getDetail()
  getDropDownBoxInfo()
})
</script>

<style lang="less" scoped></style>
